<template>
  <view>
    <z-paging @query="queryList" :refresher-enabled="true" ref="paging" v-model="dataList">
      <template slot="top">
        <u-tabs :list="list" @click="onTabTap" :current="tabIndex" lineColor="#5BA2F9"
          :activeStyle="{ color: '#333333', }" :inactiveStyle="{ color: '#999999' }" itemStyle="height: 90rpx;" />
      </template>
      <view class="color-bg-fff margin-10 padding-10">
        <view @click="goToClassDetail(item.id)" v-for="(item, index) in dataList" :key="index">
          <view class="flex-between">
            <simple-image :src="item.src.startsWith('http') ? item.src : baseUrl + item.src" width="340rpx" height="210rpx"
              radius="20rpx"></simple-image>
            <view class="flex-1 padding-left-10 padding-top-10 flex flex-justify-between flex-col"
              style="height: 210rpx;">
              <view>
                <view class="font-16 font-weight color-333">{{ item.title || '桥梁工程施工技术' }}</view>
                <view class="flex margin-top-8">
                  <u-tag :text="item.tag || '测试标签'" plain size="mini" color="#5BA2F9"></u-tag>
                </view>
              </view>
              <view class="flex-between">
                <view class="color-999 font-12">{{ item.participants || '99人已参与' }}</view>
                <view class="flex-start">
                  <text class="color-999 font-12 margin-right-1" 
                    :style="item.originalPrice ? 'text-decoration: line-through;' : ''">
                    {{ item.originalPrice ? '￥' + item.originalPrice : '' }}
                  </text>
                  <view>
                    <text class="color-redFont">￥</text>
                    <text class="color-redFont font-16 font-weight">{{ item.price || '666' }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <u-line margin="30rpx 0"></u-line>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
import config from '@/config'
import { listAllClassCategory } from '@/api/course/classCategory'
import { listClass } from '@/api/course/class'

const baseUrl = config.baseUrl

export default {
  data() {
    return {
      baseUrl: baseUrl,
      tabIndex: 0,
      currentTab: null,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        categoryId: null
      },
      dataList: [],
      list: []
    }
  },
  onLoad() {
    this.loadCategories()
  },
  methods: {
    // 切换状态标签
    onTabTap(item) {
      this.tabIndex = item.index
      this.currentTab = item
      this.queryParams.categoryId = item.id
      this.queryList(1)
    },
    queryList(page) {
      this.queryParams.pageNo = page;
      this.getList();
    },
    async getList() {
      try {
        // 构建查询参数
        const query = {
          pageNum: this.queryParams.pageNo,
          pageSize: this.queryParams.pageSize,
          isPublic: 1 // 只查询公开的班级
        }
        
        // 如果选择了特定分类，添加分类ID到查询参数
        if (this.queryParams.categoryId) {
          query.categoryId = this.queryParams.categoryId
        }
        
        const response = await listClass(query)
        
        if (response.code === 200) {
          // 映射数据格式以适配页面显示
          const mappedData = (response.rows || []).map(item => ({
            id: item.id,
            src: item.coverImage || '/static/images/index-bg.png',
            title: item.className || '班级名称',
            tag: item.categoryName || '默认分类',
            participants: `${item.studentCount || 0}人已参与`,
            originalPrice: item.originalPrice,
            price: item.currentPrice || '0'
          }))
          
          this.$refs.paging.complete(mappedData);
        } else {
          this.$refs.paging.complete([]);
          uni.showToast({
            title: response.msg || '获取班级列表失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取班级列表失败:', error)
        this.$refs.paging.complete([]);
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      }
    },
    goPage(url) {
      if (url) {
        uni.navigateTo({
          url
        })
      }
    },
    goToClassDetail(id) {
      uni.navigateTo({
        url: '/pages/class/detail?id=' + id
      })
    },
    // 加载班次分类数据
    async loadCategories() {
      try {
        const response = await listAllClassCategory()
        if (response.code === 200 && response.data) {
          // 添加"全部"选项作为第一个标签
          this.list = [
            {
              name: '全部',
              id: null,
              type: 0
            },
            ...response.data.map(item => ({
              name: item.categoryName || item.name,
              id: item.id,
              type: item.id
            }))
          ]
        }
      } catch (error) {
        console.error('加载班次分类失败:', error)
        // 如果加载失败，使用默认分类
        this.list = [
          { name: '全部', id: null, type: 0 },
          { name: '住建取证', id: 1, type: 1 },
          { name: '应急取证', id: 2, type: 2 },
          { name: '市场监管', id: 3, type: 3 },
          { name: '继续教育', id: 4, type: 4 }
        ]
      }
    }
  },
}
</script>

<style lang="scss" scoped></style>